Brian Stowell

Assignment 1:2 - Review CSS Selectors

Advanced CSS

Universal Selector - selects all of the HTML elements on the page. It uses the (*) symbol and is used when specific properties and values should apply to all elements on the page.

* {

margin:20px;

padding:15px;

background-color:orange;

}

Element Selector - this selects HTML elements by the element name. An example of this would apply all of the <img> elements on a page.

img {

display:block;

border-style:groove;

padding:20px;

background-color:orangered;

}

Pseudo Elements - are used to style specific parts of an element such as certain letters or lines of a content area. Element parts that can be styled with pseudo elements include color, font, word and letter spacing, text transformation, and line-height just to name a few. Pseudo elements are written with double colons in order to make them standout from pseudo selectors. They are written as follows:

p::first-letter {

color:white;

text-transform:uppercase;

}

Class Selector, (dependent and independent) - selects HTML elements with a specific class attribute. This selector uses a (.) that is immediately followed by the class name.

Independent class selector stands alone with a (.) followed by the class name.

.blueText {

color:blue;

background-color:lightgray;

text-align:center;

}

Dependent class selectors allow you to specify the styles a class can have when applied to a specific HTML tag. This class selector would only apply to the h2 elements on the webpage.

h2.blueText {

color:blue;

background-color:lightgray;

text-align:center;

}

Pseudo Selectors - are CSS selectors with a colon listed before them, such as :hover, :visited, and :link. These are used to define a special state of an element, like the aforementioned hover for when a mouse goes over an area or element, it will change its appearance. The pseudo selectors are written as follows:

a:hover {

color:violet;

}

Group Selector - this selector works well when elements have the same style definitions by combining them and lessening the code that you write. An example of this would apply to all of the listed selectors which are separated by a comma, and written in one line.

h1, h2, p {

text-align:left;

color: gray;

font-weight:bold;

}

Descendant Selector - this selector uses all elements that are descendants of a specific element. The elements are listed with a space in between them, such as (li p) and would apply to all <p> elements listed inside <li> elements. An example woule be as follows:

li p {

color:pink;

text-transform:uppercase;

}

ID Selector - This uses the id attribute of an HTML element to select a specific element. It is unique to one page, therefore the id selector applys to one specific element. The id is written with a hash (#) followed by the id of the element. An element can thus be styled with the id="lastName".

#lastName {

text-align:left;

color:midnightblue;

}